<!-- 列表 -->
<template>
  <div>
    <div class="title select-none" v-if="routerModel">
      <span
        v-for="(route, index) in routes"
        :key="route.path"
        @click="router(route.path)"
      >
        <span>{{index == 0 ? '' : ` / `}}</span>
        <span :class="{current: (index == routes.length - 1), isActive: !(index == routes.length - 1)}">{{route.label}}</span>
      </span>
    </div>
    <p class="title" v-else>{{title}}</p>
  </div>
</template>

<script>
export default {
  name: 'List',
  props: {
    title: {
      default: '',
      type: String
    },
    routerModel: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      routes: []
    }
  },
  methods: {
    init() {
      if (this.routerModel) {
        this.routes = this.$router.history.router.options.routes.filter(item => item.label)
      }
    },
    router(path) {
      this.$router.push(path)
    }
  },
  created() {

  },
  mounted() {
    this.init()
  }
}
</script>
<style lang='scss' scoped>
// @import ''
.title {
  padding-bottom: 10px;

  font-size: 20px;
  font-weight: 700;
  color: $primary-text;

  border-bottom: solid #000;
}
.current {
  color: $hover-color;
}
.isActive {
  cursor: pointer;

  &:hover {
    position: relative;
    top: -3px;
  }
}
</style>
